import React, {Component} from 'react';
import "./index.scss"
import axios from "axios"
import {tableData} from "../../mock/simulation.js"
import {QuestionOutlined} from '@ant-design/icons';
import Title from "../../components/common/title"
import PanelItem from "../../components/common/panelItem"
import ComModal from "../../components/common/modal";
import {TdContext} from "../../context"

const $ = require('lodash');

class Index extends Component {
    state = {
        panelList: tableData,
        open: false,
        modalData: {}
    }

    constructor (props) {
        super(props);
        this.titleRef = React.createRef()
    }

    componentWillMount () {
        this.getTable()
    }

    componentDidMount () {

    }

    getTable = () => {
        axios.get('/getTable', {}).then(res => {
            this.titleRef.current.changeLoading()
            return this.setState({panelList: res.data.result})
        })
    }


    // 刷新数据
    refreshTable = () => {
        this.getTable()
        this.titleRef.current.changeLoading()
    }

    toDeal = (val) => {
        let {open} = this.state;
        this.setState({open: !open, modalData: val})
    }
    closeModal = (val) => {
        this.setState({open: val})
    }

    render () {
        const {panelList, open, modalData} = this.state
        return (
            <div className="td-module">
                <h3>使用context传递参数</h3>
                <TdContext.Provider value={{...this.state}}>
                    <div className="panel1">
                        <Title ref={this.titleRef} tit="停电范围分析" refreshTable={this.refreshTable}>
                            {{
                                quest: <QuestionOutlined key="quest"/>
                            }}
                        </Title>
                        <div className="panel-con">
                            {
                                panelList.map((item, i) => {
                                    return <PanelItem key={i} {...item} toDeal={this.toDeal}/>
                                })
                            }
                        </div>
                    </div>
                    <ComModal
                        open={open}
                        modalData={modalData}
                        closeModal={this.closeModal}
                    />
                </TdContext.Provider>
            </div>
        );
    }
}

export default Index;